<!-- 业务信息-->
<template>
  <div>
    <el-form ref="typeForm" label-width="120px" label-position="left">
      <div class="form-content" style="display:flex">
        <el-form-item
          :label="label+':'"
          v-for="({param,label},idx) in imagesMap[typeForm.sort]"
          :key="param"
          style="flex:1"
        >
          <template v-if="typeStatus !='view'">
            <upload
              :ref="param"
              accept=".jpg, .jpeg, .png, .pdf, .JPG, .PNG, .JPEG, .PDF"
              :limit="1"
              :multiple="false"
              :fileList="[typeForm[param] || '']"
              :size="5"
              @selectedFile="(file)=>{imagesMap[typeForm.sort][idx].changeFlag = true;if(!file) {urlMap[param]=''}}"
            ></upload>
            <div>jpg/png/jpeg/pdf格式，大小限制在5MB以内。</div>
          </template>
          <viewer v-else>
            <div class="image-box">
              <img v-center="typeForm[param]" :src="typeForm[param]" />
            </div>
          </viewer>
        </el-form-item>
      </div>
      <div class="form-content" style="display:flex" v-if="typeStatus ==='view'">
        <div v-for="({param,label}) in legacyImagesArray" :key="param">
          <el-form-item :label="label+':'" style="flex:1" v-if="typeForm[param]">
            <viewer>
              <div class="image-box">
                <img v-center="typeForm[param]" :src="typeForm[param]" />
              </div>
            </viewer>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import api from "@/api/apiPath";
import utils from "@/common/utils";
import upload from "@/components/common/Upload";

export default {
  components: {
    upload
  },
  props: ["typeForm", "typeStatus", "necessary"],
  data() {
    return {
      urlMap: {},
      imagesMap: {
        "0": [
          {
            param: "openingBankLicense",
            label: "开户许可证",
            changeFlag: false
          }, //changeFlag 判断是否选择文件
          { param: "businessLicense", label: "营业执照", changeFlag: false }
        ],
        "1": [
          { param: "idCardFront", label: "身份证正面", changeFlag: false },
          { param: "idCardBack", label: "身份证反面", changeFlag: false }
        ]
      },
      legacyImagesArray: [
        { param: "strategicAgreement", label: "战略协议" },
        { param: "consentletter", label: "同意确认函" }
      ]
    };
  },
  methods: {
    veri() {
      return new Promise(resolve => {
        if (!this.necessary) {
          resolve(true);
          return;
        }
        let _this = this;
        for (let i = 0; i < this.imagesMap[this.typeForm.sort].length; i++) {
          let { param, label } = this.imagesMap[this.typeForm.sort][i];
          if (!_this.$refs[param][0].fileList__[0]) {
            _this.$message.error(`请上传${label}`);
            resolve(false);
            break;
          }
        }
        resolve(true);
      });
    },
    selectFile(idx) {
      //更改当前文件选择状态
      this.imagesMap[this.typeForm.sort][idx].changeFlag = true;
    },
    submit() {
      let _this = this;
      let uoloadImgProps = this.imagesMap[this.typeForm.sort];

      return new Promise(resolve => {
        //上传第一张
        (function toload(idx) {
          if (idx < uoloadImgProps.length) {
            let { param, label, changeFlag } = uoloadImgProps[idx];
            if (!changeFlag) {
              idx++;
              toload(idx);
              return;
            }
            //调用upload组件submit
            _this.$refs[param][0]
              .submit()
              .then(urls => {
                //console.log(`上传成功${idx + 1} url ${urls[0]}`);
                _this.urlMap[param] = urls[0] || "";
                //表单给当前字段赋值url
                idx++;
                //递归上传
                toload(idx);
              })
              .catch(() => {
                _this
                  .$confirm(`${label}上传失败，是否重新上传`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                  })
                  .then(() => {
                    //失败递归重新传
                    toload(idx);
                  })
                  .catch(() => {
                    resolve(false);
                    console.log("取消再次上传");
                  });
              });
          } else {
            _this.typeForm = Object.assign(_this.typeForm, _this.urlMap);
            //成功返回true
            resolve(true);
          }
        })(0);
      });
    }
  },
  directives: {
    center: {
      // 指令的定义
      update: function(el, binding, vnode) {
        let url = binding.value;
        let newImg = new Image();
        newImg.src = url;
        newImg.onload = function() {
          if (newImg.width >= newImg.height) {
            el.style.height = "100%";
          } else {
            el.style.width = "100%";
          }
        };
      }
    }
  },
  created() {},
  destroyed() {},
  filters: {},
  computed: {}
};
</script>
<style scoped>
.image-box {
  width: 140px;
  height: 140px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}
</style>

